<template>
  <div class="main commodity-tag-list">
    <el-tabs v-model="activeName">
      <el-tab-pane label="后台分类" name="first">
        <tree-table :data="backlist" v-loading="listLoading" :columns="columns" :evalArgs="args" :expandAll="true" border>
          <el-table-column align="left" label="操作" width="260">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.children ||(scope.row.children&&scope.row.children.length === 0)" type="success" size="mini"
                @click="showRelation(scope.row)">关联属性组
              </el-button>
            </template>
          </el-table-column>
        </tree-table>
      </el-tab-pane>
      <el-tab-pane label="前台分类" name="second">
        <div class="marginB">
          <el-button type="primary" size="large" @click="$router.push({path:'/goodsMiddleStage/categoryAdd'})">新建一级分类</el-button>
        </div>
        <tree-table :data="frontlist" v-loading="listLoading" :columns="columns" :evalArgs="args" :expandAll="true" border>
          <el-table-column align="left" label="操作" width="400">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini"
                @click="$router.push({path: '/goodsMiddleStage/categoryAdd', query:{parentId:scope.row.id, parentName:scope.row.name}})">
                新增子类
              </el-button>
              <el-button type="primary" plain size="mini" @click="editItem(scope.row)">编辑
              </el-button>
              <el-button v-if="scope.row.parentId !==  0" type="primary" size="mini" @click="showBackRelation(scope.row)">关联后台分类
              </el-button>
              <el-button :disabled="scope.row.parentId===0 && scope.row.children.length !== 0" type="danger" plain size="mini"
                @click="deleteComfir(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </tree-table>
      </el-tab-pane>
      <el-tab-pane v-if="relationVisible" label="关联属性组" name="third">
        <Relation :data="currentCat" />
      </el-tab-pane>
      <el-tab-pane v-if="relationBackVisible" label="关联后台分类" name="four">
        <BackRelation :data="currentCat" :backCatTree="backlist" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
import mixins from '../mixins'
import {
  getCateTree,
  getFrontCatTree,
  deleteFrontCat
} from '@/api/goodMiddleStage'
import Relation from './relation'
import BackRelation from './backrelation'
export default {
  name: 'goodsMiddleStage-category',
  mixins: [mixins],
  components: {
    treeTable,
    Relation,
    BackRelation
  },
  data() {
    return {
      relationVisible: false, // 关联属性
      relationBackVisible: false, // 关联后台分类
      currentCat: null, // 当前选中类别
      activeName: 'first',
      backlist: [],
      frontlist: [],
      columns: [
        {
          text: '名称',
          value: 'name'
        }
      ],
      args: [null, null, 'name'],
      listLoading: false
    }
  },
  watch: {
    activeName(val) {
      console.log('activeName', this.activeName)
      if (this.activeName === 'first' || this.activeName === 'second') {
        this.relationVisible = false
        this.relationBackVisible = false
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getBackCate()
      this.getFrontTree()
    },
    // 获取后台类目列表
    async getBackCate() {
      this.listLoading = true
      try {
        const { data } = await getCateTree()
        this.backlist = data.treeList
        this.listLoading = false
      } catch (error) {
        console.log(error)
        this.list = []
        this.listLoading = false
      }
    },
    async getFrontTree() {
      try {
        this.listLoading = true
        const { data } = await getFrontCatTree()
        this.frontlist = data.treeList
        this.listLoading = false
      } catch (error) {
        console.log(error)
        this.listLoading = false
      }
    },
    // 删除前台类目
    async deleteFrontCat(val) {
      try {
        const { data } = await deleteFrontCat({ id: val.id })
        this.$message.success('删除成功')
        this.getFrontTree()
      } catch (error) {
        console.log(error)
        this.$message.error('删除失败')
      }
    },
    async deleteComfir(val) {
      try {
        await this.$confirm('是否删除当前分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.deleteFrontCat(val)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 后台关联属性
    showRelation(val) {
      this.relationVisible = true
      this.activeName = 'third'
      this.currentCat = val
    },
    // 关联后台分类
    showBackRelation(val) {
      console.log('showBackRelation', val)
      this.relationBackVisible = true
      this.activeName = 'four'
      this.currentCat = val
    },
    editItem(val) {
      this.$router.push({
        path: '/goodsMiddleStage/categoryEdit',
        query: {
          parentId: (val.parent && val.parent.id) || 0,
          parentName: (val.parent && val.parent.name) || '',
          smallPic: val.smallPic,
          banner: val.banner,
          id: val.id,
          name: val.name,
          goodsSortType: val.goodsSortType,
          enableStatus: val.enableStatus,
          sort: val.sort
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.commodity-tag-list {
  background: #fff;
  .marginB {
    margin-bottom: 20px;
  }
}
</style>
